<template>
  <div class="index">
    <div class="mt20">
      <Tabs value="name1">
        <TabPane label="发票索取" name="name1">
          <div>
            起止时间：
            <DatePicker type="date" format="yyyy-MM-dd"/>至
            <DatePicker type="date" format="yyyy-MM-dd"/>产品名称：
            <Input type="text" style="width: 200px;"/>
            <Button type="primary" style="width: auto;">查询</Button>
          </div>
          <Table border stripe :columns="columns1" :data="data1" class="mt20">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="ios-paper c1" size="20" @click="gotoDetail(row)"/>
            </template>
          </Table>
          <div class="page mt20">
            <Page :total="100" show-sizer show-total/>
          </div>

          <div class="mt20">
            <div class="f12">
              有
              <span class="c4">3</span>个订单可以申请发票，可开票总额
              <span class="c4">¥12122.00</span>
            </div>
            <div class="mt20">
              <Button type="primary">索取发票</Button>
              <span class="f12">
                您尚未设置有效的开票信息，无法开具发票。
                <a href="#" class="link-warning">立即设置发票抬头</a>
              </span>
            </div>
          </div>
        </TabPane>
        <TabPane label="发票列表" name="name2">
          <div>
            起止时间：
            <DatePicker type="date" format="yyyy-MM-dd"/>至
            <DatePicker type="date" format="yyyy-MM-dd"/>发票状态：
            <Select v-model="tradeType" style="width:100px">
              <Option
                v-for="item in tradeTypes"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>发票抬头：
            <Input type="text" style="width: 200px;"/>
            <Button type="primary" style="width: auto;">查询</Button>
          </div>
          <Table border stripe :columns="columns2" :data="data1" class="mt20">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="ios-paper c1" size="20" @click="gotoDetail(row)"/>
            </template>
          </Table>
        </TabPane>
        <TabPane label="发票信息管理" name="name3">
          <ul class="invoice-info">
            <li>
              发票信息有效 &nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to="invoiceEdit" class="link-warning">修改发票信息</router-link>
            </li>
            <li>发票抬头：创业惠康</li>
            <li>开具类型：企业</li>
            <li>发票类型：增值税专用发票</li>
            <li>税务登记号：243432432432423432</li>
            <li>基本开户银行名称：杭州银行xx支行</li>
            <li>基本开户账户号：32432423423432</li>
            <li>注册场所地址：创业惠非法所得房贷首付水电费水电费康</li>
            <li>注册固定电话：0571-34837666</li>
          </ul>
        </TabPane>
        <TabPane label="发票寄送地址管理" name="name4">
          <Table border stripe :columns="columns3" :data="data1" class="mt20">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="ios-create c5" size="20" />
              <Icon type="ios-trash c7" size="20" @click="deleteHandle(row,index)"/>
            </template>
          </Table>
          <div class="mt20">
            <Button type="primary" @click="modal1=true">新增地址</Button>
          </div>
        </TabPane>
      </Tabs>
    </div>

    <Modal v-model="modal1" title="地址管理" @on-ok="okHandle" footer-hide>
      <div class="edit-address">
        <Row>
          <Col span="24">
            <div class="clearfix wrap">
              <div class="fl label">收件人姓名：</div>
              <div class="fl">
                <Input type="text" style="width: 200px;"/>
                <!-- <span class="c4">*</span> -->
              </div>
            </div>

            <div class="clearfix wrap mt10">
              <div class="fl label">所在地区：</div>
              <div class="fl">
                <v-distpicker
                  province="浙江省"
                  city="杭州市"
                  area="西湖区"
                  @province="selectProvince"
                  @city="selectCity"
                  @area="selectArea"
                ></v-distpicker>
              </div>
            </div>

            <div class="clearfix wrap mt10">
              <div class="fl label">街道地址：</div>
              <div class="fl">
                <Input type="text" style="width: 200px;"/>
                <!-- <span class="c4">*</span> -->
              </div>
            </div>

            <div class="clearfix wrap mt10">
              <div class="fl label">邮政编码：</div>
              <div class="fl">
                <Input type="text" style="width: 200px;"/>
              </div>
            </div>

            <div class="clearfix wrap mt10">
              <div class="fl label">手机号：</div>
              <div class="fl">
                <Input type="text" style="width: 200px;"/>
              </div>
            </div>

            <div class="clearfix wrap mt10" style="padding-left:120px;">
              <Checkbox>设为默认地址</Checkbox>
            </div>

            <div class="mt20 text-center">
              <Button type="primary" style="width:160px;">提 交</Button>
            </div>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";

export default {
  components: { VDistpicker },
  data() {
    return {
      modal1: false,
      position: [
        { title: "财务管理", link: "/admin/moneyManage" },
        { title: "发票管理" }
      ],
      columns1: [
        { type: "selection", width: 60, align: "center" },
        { title: "订单编号", key: "id" },
        { title: "产品名称", key: "address" },
        { title: "类型", key: "address" },
        { title: "订单支付时间", key: "address" },
        { title: "订单实付金额（元）", key: "address" },
        { title: "可开票金额（元）", key: "address" }
      ],
      columns2: [
        // {type: 'selection', width: 60, align:'center'},
        { title: "申请时间", key: "id" },
        { title: "发票抬头", key: "address" },
        { title: "发票总额（元）", key: "address" },
        { title: "发票性质", key: "address" },
        { title: "发票状态", key: "address" },
        { title: "备注", key: "address" },
        { title: "操作", slot: "action", width: 80, align: "center" }
      ],
      columns3: [
        // {type: 'selection', width: 60, align:'center'},
        { title: "收件人姓名", key: "id" },
        { title: "电话号码", key: "address" },
        { title: "地址", key: "address" },
        { title: "邮编", key: "address" },
        { title: "操作", slot: "action", width: 200, align: "center" }
      ],
      tradeType: "1",
      tradeTypes: [
        { label: "已开发票", value: "1" },
        { label: "未开发票", value: "2" }
      ],
      data1: [
        {
          id: "103232",
          address: "fsdfsdfdsf"
        },
        {
          id: "103232",
          address: "fsdfsdfdsf"
        },
        {
          id: "103232",
          address: "fsdfsdfdsf"
        }
      ]
    };
  },
  mounted() {
    this.$store.commit("UPDATE_POSITION", this.position);
  },
  methods: {
    gotoDetail(item) {
      this.$router.push("invoiceDetail?id" + item.id);
    },
    okHandle() {},
    deleteHandle(row, index) {
      this.$Modal.confirm({
        title: "删除地址",
        content: "确定删除吗?",
        onOk: a => {
          this.data1.splice(index, 1);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  background: #f2f2f2;
  padding: 14px;
  .fl {
    line-height: 2;
    font-size: 12px;
  }
}

.invoice-info {
  margin: 20px;
  border: 1px solid #ddd;
  li {
    line-height: 50px;
    background: #fbfbfb;
    border-bottom: 1px solid #ddd;
    padding-left: 40px;
  }
}
.edit-address {
  .label{
  width: 120px;
  text-align: right;
}
}
</style>
